<template>
	<view class="carditem bjcard" style="height: 560rpx">
		<view class="title u-flex-y-center">
			<u--image :showLoading="true" :src="bjtitle" width="32rpx" height="32rpx"></u--image>
			<view style="width: 8rpx"> </view>
			现场报警信息
		</view>
		<scrollList :list="list" :height='400'>
			<template #scroll="scope">
				<view class="" style="padding: 12rpx 34rpx;;">
					<view class="bjitem u-flex-y-center">
						<view class="icon">
							<u--image :showLoading="true" :src="scope.rows.icon" width="48rpx"
								height="48rpx"></u--image>
						</view>
						<view class="content">
							<view class="bjtitle">{{ scope.rows.title }}</view>

							<view class="nr u-line-1">设备id:{{ scope.rows.gtel }} | {{ scope.rows.name }} </view>
						</view>
						<view class="t">
							{{ scope.rows.time }}
						</view>
					</view>
				</view>

			</template>
		</scrollList>
	</view>
</template>

<script>
	import bjtitle from "@/static/xmxq/bj/bjtitle.png";
	import sos from "@/static/xmxq/bj/sos.png";
	import tm from "@/static/xmxq/bj/tm.png";
	import ddl from "@/static/xmxq/bj/ddl.png";
	import wxy from "@/static/xmxq/bj/wxy.png";
	import zjbj from "@/static/xmxq/bj/zjbj.png";
	import jzbj from "@/static/xmxq/bj/jzbj.png";
	import {getAlarmList} from "@/api/index";
	export default {
		components: {},
		data() {
			return {
				bjtitle,
				intervalId: null,
				scrollTop: 0,
				list:[],

				typeObj: {
					SOS: sos,
					WEAR: tm,
					LOW_POWER: ddl,
					DANGEROUS: wxy,
					IMPACT: zjbj,
					STILL: jzbj,
					UNKNOWN: zjbj,
				},
				iconlist: [{
						icon: sos,
						title: "sos报警",
						gtel: "123",
						name: "王海淘",
						time: "10:45:12",
					},
					{
						icon: tm,
						title: "提醒",
						gtel: "123",
						name: "王海淘",
						time: "10:45:12",
					},
					{
						icon: ddl,
						title: "待定",
						gtel: "123",
						name: "王海淘",
						time: "10:45:12",
					},
					{
						icon: wxy,
						title: "危险源",
						gtel: "123",
						name: "王海淘",
						time: "10:45:12",
					},
					{
						icon: zjbj,
						title: "正常报警",
						gtel: "123",
						name: "王海淘",
						time: "10:45:12",
					},
					{
						icon: jzbj,
						title: "紧急报警",
						gtel: "123",
						name: "王海淘",
						time: "10:45:12",
					},
				],
			};
		},
		// 页面加载时启动滚动
		mounted() {

		},

		// 页面卸载时清除定时器
		onUnload() {

		},
		methods: {
			async init(projectId) {
				const res = await getAlarmList({
					projectId: projectId
				})
				console.log(res,"报警列表")
				this.list = res.data.map(item=>{
					return {
						icon: this.typeObj[item.type],
						title: item.reasonDesc,
						gtel: item.sn,
						name: item.workerName,
						time: item.alarmTime.slice(0,10),
					}
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.carditem {
		margin: 0 32rpx;
		color: #fff;
		border-radius: 12px;
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)),
			rgba(255, 255, 255, 0.08);
		box-sizing: border-box;
		border: 1px solid rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(20px);
		box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.2);
	}

	.bjcard {
		.title {
			display: flex;
			align-items: center;
			padding: 0 34rpx;
			height: 120rpx;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 56rpx;
		}

		.bjscrollView {
			height: 400rpx;
		}

		.bjitem {

			border-radius: 12px;
			background: linear-gradient(0deg,
					rgba(0, 0, 0, 0.001),
					rgba(0, 0, 0, 0.001)),
				rgba(255, 255, 255, 0.08);
			box-sizing: border-box;
			border: 1px solid rgba(255, 255, 255, 0.1);
			backdrop-filter: blur(20px);
			box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.2);

			height: 132rpx;
			padding: 0 26rpx;

			.icon {
				padding-right: 8rpx;
			}

			.t {
				color: #9CA3AF;
				font-size: 24rpx;
				padding-left: 8rpx;
			}

			.content {
				width: 0;
				flex: 1;

				.bjtitle {
					font-size: 32rpx;
					font-weight: bold;
					line-height: 48rpx;
				}

				.nr {
					color: #D1D5DB;
					font-size: 24rpx;
					line-height: 32rpx;
				}
			}
		}
	}
</style>